<?php
require_once('tools/header.php');
$id = isset($_GET['id']) ? $_GET['id'] : 1;
//	echo $id;
?>
<!DOCTYPE html>
<html>
<head>
	<title>Single</title>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="js/jquery.min.js"></script>
	<!-- Custom Theme files -->
	<!--theme-style-->
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!--//theme-style-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="Whizz Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
	<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!--flexslider-->
	<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
	<!--//flexslider-->
	<style>
		.pageStyle li{
			float: left;
		}
	</style>
</head>
<body>
<!--header-->
<div class="header">
	<div class="container">
		<div class="header-top">
			<div class="top-nav">
				<span class="menu"><img src="images/menu.png" alt=""> </span>
				<ul>
					<li ><a href="index.php" class="color"><i class="glyphicon glyphicon-home"></i>  </a> </li>
					<li><a href="portfolio.php"   class="hvr-bounce-to-top">分类照片</a></li>
<!--					<li ><a href="404.php" class="hvr-bounce-to-top">暂定 </a> </li>-->
					<li><a href="blog.php"  class="hvr-bounce-to-top">博客 </a></li>
					<li><a href="about.php"  class="hvr-bounce-to-top">关于我 </a></li>
					<!--					<li><a href="typo.php"  class="hvr-bounce-to-top">Typo </a></li>-->
					<li><a href="contact.php"  class="hvr-bounce-to-top">联系我 </a></li>
					<div class="clearfix"> </div>
				</ul>
				<!--script-->
				<script>
					$("span.menu").click(function(){
						$(".top-nav ul").slideToggle(500, function(){
						});
					});
				</script>
			</div>
			<div class="search-in" >
<!--				<div class="search" >-->
<!--					<form >-->
<!--						<input type="text"  class="text">-->
<!--						<input type="submit" value="SEARCH">-->
<!--					</form>-->
<!--					<div class="close-in"><img src="images/close.png" alt="" /></div>-->
<!--				</div>-->
				<div class="right"><button> </button></div>
			</div>
			<script type="text/javascript">
				$('.search').hide();
				$('button').click(function (){
						$('.search').show();
						$('.text').focus();
					}
				);
				$('.close-in').click(function(){
					$('.search').hide();
				});
			</script>
			<div class="clearfix"> </div>
		</div>
		<div class="logo">
			<a href="index.php"><img src="images/logo.png" alt="">	</a>
		</div>
	</div>
</div>
<!--//header-->
<!--content-->
<div class="single">
	<div class="container">
		<div class="col-md-8 ">
			<!--				文章详细信息显示处-->
			<?php
			$sql = "select * from article where article_id = ?";
			$sql2 = "select count(*) as total from comments where article_id = ?";

			$stmt = $db->prepare($sql);
			$stmt2 = $db->prepare($sql2);

			$stmt->bindValue(1, $id);
			$stmt2->bindValue(1, $id);
			$stmt->execute();
			$stmt2->execute();

			$result = $stmt->fetch(PDO::FETCH_ASSOC);
			$result2 = $stmt2->fetch(PDO::FETCH_ASSOC);
			$total = $result2['total'];
			?>
			<div class=" single-grid">

				<!--					显示文章相关的第一张照片-->
				<a href="single.php">
					<?php
					$pic = $result['article_pictures'];
					$picArr = explode(';', $pic);
					$picUrl = 'articlePictures/'.$picArr[0];
					?>
					<img class="img-responsive" src="<?=$picUrl?>" alt="" /></a>


				<div class="lone-line">
					<!--						文章标题-->
					<h4><?=$result['article_title']?></h4>
					<div class="cal">
						<ul>
							<!--								文章发布时间-->
							<li><span ><i class="glyphicon glyphicon-calendar"> </i><?php echo (substr($result['article_date'], 0, 9));?></span></li>
							<!--								文章评论留言数-->
							<li><a href="#" ><i class="glyphicon glyphicon-comment"></i><?=$total?></a></li>
						</ul>
					</div>

					<!--						文章正文-->
					<p>
						<?=$result['article_context']?>
					</p>
				</div>
			</div>

			<div class=" single-profile">
				<h4> Related Posts</h4>
				<div class="single-left ">
					<?php
					$str = $result['article_pictures'];
					//							echo $str;

					$pictures = explode(';', $str);
					$total = sizeof($pictures);

					//							echo $total; 图片总数
					//							print_r($pictures);

					$pagesize = 8;

					// 总页数
					$pages = ceil($total / $pagesize);

					// 设置页数
					if(isset($_GET['page'])){
						$page = $_GET['page'];
					}else{
						$page = 1;
					}

					// 记录偏移量
					$offset = $pagesize * ($page - 1);

					$count = 0;

					for($i = $offset; $i < $total; $i++){
						if($count < 8){
							$pictureUrl = 'articlePictures/'.$pictures[$i];
//									echo $pictureUrl.'<br>';
							?>
							<div class="col-md-3 post-top">
								<img style="width: 280px; height: 180px" class="img-responsive " src="<?=$pictureUrl?>" alt="">
								<!--									<h6>Duis autem</h6>-->
								<!--									<p>Lorem ipsum dolor sit amet, consectetuer .</p>-->
							</div>
							<?php
							$count++;
						}
					}
					?>
					<div class="clearfix"> </div>

					<div style="margin-top: 30px; margin-left: 20px">
						<ul style="list-style: none" class="pageStyle">
							<?php
							$first = 1;
							$prev = $page - 1;
							$next = $page + 1;
							$last = $pages;

							echo('<li><a href="#">共 '.$pages.' 页&nbsp;&nbsp;</a></li>');

							if($page > 1){
								echo('<li><a href="single.php?page='.$first.'" >首页&nbsp;&nbsp;</a></li>');
								echo('<li><a href="single.php?page='.$prev.'" >上一页&nbsp;&nbsp;</a></li>');
							}

							if($pages > 1){
								for($p = 1; $p <= $pages; $p++){
									if($p == $page){
										echo('<li><a href="#">[ '.$p.' ]&nbsp;&nbsp;</a></li>');
									}else{
										echo('<li><a href="single.php?page='.$p.'">'.$p.'&nbsp;&nbsp;</a></li>');
									}
								}
							}

							if($page <$pages){
								echo '<li><a href="single.php?page='.$next.'">下一页&nbsp;&nbsp;</a></li>';
								echo '<li><a href="single.php?page='.$last.'">末页&nbsp;&nbsp;</a></li>';
							}
							?>
						</ul>
					</div>
				</div>
			</div>
			<div class="single-bottom">
				<h3>Leave A Comment</h3>
				<form action="tools/doAction.php?action=doComment&articleID=<?=$result['article_id']?>" method="post">
					<div class="col-md-6 comment">
						<input type="text" placeholder="Name" name="name">
					</div>

					<div class="col-md-6 comment">
						<input type="text" placeholder="Email" name="email">
					</div>

					<div class="clearfix"> </div>
					<textarea  placeholder="Message" required name="comment"></textarea>

					<input type="submit" value="Send">
				</form>
			</div>
		</div>
		<div class="col-md-3 categories-grid">
			<div class="grid-categories">
				<h4>近期文章</h4>
				<ul class="popular ">
					<?php
						$sql3 = "select * from article order by article_date desc limit 8";
						$stmt3 = $db->prepare($sql3);
						$stmt3->execute();

						$result3 = $stmt3->fetchAll(PDO::FETCH_ASSOC);

						foreach($result3 as $k){
						?>
							<li><a href="single.php?id=<?=$k['article_id']?>"><i class="glyphicon glyphicon-ok"> </i><?=$k['article_title']?></a></li>
					<?php
						}
					?>
				</ul>
			</div>


			<div class="grid-categories">
				<h4>近期评论</h4>
				<ul class="popular popular-in">
					<?php
						$sql4 = "select * from comments where article_id = ? order by comment_date desc limit 5";
						$stmt4 = $db->prepare($sql4);
						$stmt4->bindValue(1, $id);
						$stmt4->execute();

						$result4 = $stmt4->fetchAll(PDO::FETCH_ASSOC);

						foreach($result4 as $k2){
							?>
							<li><a href="#"><i class="glyphicon glyphicon-ok"> </i>
									<?php
										$str2 = $k2['comment_context'];
										echo mb_substr($str2, 0, 15);
									?>
								</a>
							</li>
					<?php
						}
					?>
<!--					<li><a href="#"><i class="glyphicon glyphicon-ok"> </i>MAY 2014</a></li>-->
<!--					<li><a href="#"><i class="glyphicon glyphicon-ok"> </i>SEP 2012</a></li>-->
<!--					<li><a href="#"><i class="glyphicon glyphicon-ok"> </i>JANUARY 2011</a></li>-->
<!--					<li><a href="#"><i class="glyphicon glyphicon-ok"> </i>FEB 2010</a></li>-->
<!--					<li><a href="#"><i class="glyphicon glyphicon-ok"> </i>NOV 2009</a></li>-->
				</ul>
			</div>
		</div>
		<div class="clearfix"> </div>

	</div>
</div>

<!--//content-->
<div class="footer">
	<div class="container">
		<div class="footer-class">
			<div class="col-md-10 class-footer">
				<ul>
					<li ><a href="index.php" >首页</a> </li>
					<li><a href="portfolio.php" >分类照片</a></li>
					<!--						<li ><a href="404.php" >Tours </a> </li>-->
					<li><a href="blog.php" >博客 </a></li>
					<li><a href="about.php" >关于我 </a></li>
					<!--						<li><a href="typo.php" >Typo </a></li>-->
					<li><a href="contact.php" >联系我 </a></li>
					<li><a href="tools/doAction.php?action=checkCookies" >进入后台管理 </a></li>
				</ul>
				<p class="footer-grid">Copyright &copy; 2017.Company name All rights reserved.</p>
			</div>
			<div class="col-md-2">
				<ul class="social">
					<li ><a href="#"><i> </i></a></li>
					<li ><a href="#"><i class="facebook"> </i></a></li>
					<li ><a href="#"><i class="google"> </i></a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>

</div>
</body>
</html>